<template>
  <div class="app-container">
    <el-card class="box-card">
      <a>
        <img :src="studentDetail.userHeadImg" width="150px" height="150px" />
        
      </a>
      <div class="box-item">
        <el-row style="font-size: 15px; line-height: 2em; color: #909399">
          <el-col :span="10">
              姓名:{{studentDetail.userName}}<br>
              编号:{{studentDetail.userId}}<br/>
              公司:{{studentDetail.userCompany}}<br/>
              职位:{{studentDetail.userPosition}}<br/>
              角色:{{studentDetail.userRole}}<br/>
              联系电话:{{studentDetail.userTelephone}}<br/>
              邮箱:{{studentDetail.userEmail}}
          </el-col>
          
          <el-col :span="14">
          <div style="margin-top:-15px">
            <el-col   :span="8" v-for="(model) in model_list.data" :key="model.index">
              {{model.abilityName}}<br>
                <div class="myability" v-for="(ability) in model.childAbilityList" :key="ability.index">
                  <span style="font-size:12px">{{ability.abilityName}}:{{"\xa0\xa0"}}</span>
                  <span>
                    <el-progress :text-inside="true" :stroke-width="15" :percentage="ability.score" :show-text="show">
                    </el-progress>
                  </span>
              </div>

            </el-col>
          </div>
        </el-col>
        </el-row>
      </div>
    </el-card>
    <studentmenu></studentmenu>
  </div>
</template>

<script>
import {getStudent} from '@/api/user'
import studentmenu from '../studentmenu/studentmenu.vue'
import { findAmById} from '@/api/user'

export default {
  name: 'Detail',
  data() {
    return {
      userId:0,
      studentDetail: [],
      model_list:{
        data:[]
      },
    }
  },
  // 注册组件
  components: {
    studentmenu
  },
  created() {
    this.userId = this.$route.query.userId;
    this.getStudentData(this.userId);
    
  },
  methods: {
    getStudentData(data){
      getStudent(data).then((res) => {
        
        this.studentDetail = res.data
      }).catch((err) => {
        console.log(err);
      });
      findAmById(data).then(
        res => {
          console.log(res);
          this.model_list.data = res.data;
          console.log(this.model_list.data);
        }
      )
    }
  }
}
</script>

<style scoped>
.box-item{
  width: 75%;
  float: right;
  margin-right: 110px;
}
.field-label{
  vertical-align: middle;
}
.box-card {
  width: 98%;
  max-width: 100%;
  margin: 20px auto;
}

.block {
  padding: 30px 24px;
}

.tag-item {
  margin-right: 15px;
}

</style>